import React from 'react';
import Axios from 'axios';
import Hotchlid from './hotchild'

class Hot extends React.Component{
    constructor(props){
        super(props);
        this.state={
            res:'',
        }
    }
    componentDidMount(){
        var box = document.getElementsByClassName('ybhot')[0];
        var btnLeft = document.getElementsByClassName('hotleft')[0];
        var btnRight = document.getElementsByClassName('hotright')[0]
        var aLi = document.getElementsByClassName('ybmsgli');
        var oOL = document.getElementsByClassName('yb-bot')[0];
        var aOli = oOL.getElementsByTagName('li');
        var flag=0;
        var timer;
        for(var i=0;i<aOli.length;i++){
            aOli[i].temp=i;
            aOli[i].onmouseover=function(){
                flag=this.temp;
                tab();
            }
        }
        function tab(){
            for(var j=0;j<aOli.length;j++){
                aLi[j].style.opacity='0';
                aLi[j].style.zIndex='1';
                aOli[j].className='';
            }
            aLi[flag].style.opacity='1';
            aOli[flag].className='live';
            aLi[flag].style.zIndex='2';
        }
        box.onmouseover=function(){
            btnRight.style.display='block';
            btnLeft.style.display='block';
            clearInterval(timer);
        }
        box.onmouseout=function(){
            btnRight.style.display='none';
            btnLeft.style.display='none';
            // timer=setInterval(function(){
            //     btnRight.onclick();
            // },3000)
        }
        btnLeft.onclick=function(){
            if(flag<=0)
            {
                flag=aOli.length-1;
            }
            else{
                flag--;
            }
            tab();
        }
        btnRight.onclick=function(){
            if(flag>=aOli.length-1)
            {
                flag=0;
            }
            else{
                flag++;
            }
            tab();
        }
        // timer=setInterval(function(){
        //     btnRight.onclick();
        // },3000)
    }
    componentWillMount(){
		var that =this;
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/gethot',
			dataType:'json'
		}).then(function(res){
			that.setState({
				res:res.data,
			})
		})	
	}
    render(){
        var _res=this.state.res.msg;
		var html=[];
		var dt =[];
		if(_res){
			for(var i=1;i<=_res.length;i++){
				dt.push(_res[i]);
				if(i%4==0){
					html.push(
						<Hotchlid key={i}  {...dt}/>
					)
					dt=[];
				}
			}
		}
        return(
            <div id="taogelist_box">
                <div className="mod_index--hot">
                    <div className="section_inner goo">
                        <div className="index__hd">
                            <h2 className="index__tit">
                                <i className="index__tit_sprite hotbg"></i>
                                <i className="icon_txt">MV首播</i>
                            </h2>
                            <i className="index__line index__line--left"></i>		
                            <i className="index__line index__line--right"></i>
                        </div>
                    </div>
                    <div className="ybhot">
                        <ul className="ybmsg">
                           {html}
                        </ul>
                        <a href="javasctipt:;" className="hotleft hotbtn">&lt;</a>
                        <a href="javasctipt:;" className="hotright hotbtn">&gt;</a>
                    </div>
                    <div className="yb-bot">
                        <ol>
                            <li className="live"></li>
                            <li></li>
                            <li></li>
                        </ol>
                    </div>
                </div>
            </div>
        )
    }
}

export default Hot;